<template>
  <el-dialog
    v-el-drag-dialog
    title="规格"
    width="60%"
    :close-on-click-modal="false"
    :visible.sync="visible">
    <span style="color: #a0a3a9;font-size: 12px;">提示：未选中的规格将以原价参加活动</span>
    <el-table
      ref="table"
      @cell-click="tableClink"
      :data="dataList"
      border
      v-loading="dataListLoading"
      @selection-change="selectionChangeHandle"
      style="width: 100%;">
      <el-table-column
        type="selection"
        header-align="center"
        align="center"
        v-if="!flag"
        width="30">
      </el-table-column>
      <el-table-column
        width="170"
        prop="specs"
        label="规格"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column
        prop="vipPrice"
        label="商城售价"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column
        prop="price"
        label="商品原价"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column
        prop="count"
        label="库存数量"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column
        prop="integral"
        label="现金券"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column
        prop="goodsCostingPrice"
        label="商品利润"
        header-align="center"
        align="center">
      </el-table-column>
      <el-table-column
        prop="goodsPrice"
        header-align="center"
        align="center"
        :label="goodsType ? '活动价（券）':'活动价'">
        <template slot-scope="scope">
          <span v-if="goodsType" hidden="true">
            {{typeof (scope.row.goodsPrice) === "undefined" ?
                scope.row.goodsPrice = scope.row.integral : scope.row.goodsPrice}}
          </span>
          <span v-if="!goodsType" hidden="true">
            {{typeof (scope.row.goodsPrice) === "undefined" ?
              scope.row.goodsPrice = scope.row.vipPrice : scope.row.goodsPrice}}
          </span>
          <el-input v-model="scope.row.goodsPrice" placeholder="" @change="checkNumber(scope.row.goodsPrice,false)"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        v-if="!goodsType"
        prop="activityGoodsCostingPrice"
        header-align="center"
        align="center"
        label="活动利润">
        <template slot-scope="scope">
          <span hidden="true">{{typeof (scope.row.activityGoodsCostingPrice) === "undefined"? scope.row.activityGoodsCostingPrice = scope.row.goodsCostingPrice : scope.row.activityGoodsCostingPrice}}</span>
          <el-input v-model="scope.row.activityGoodsCostingPrice" placeholder="" @change="checkNumber(scope.row.activityGoodsCostingPrice,false)"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="goodsInventory"
        header-align="center"
        align="center"
        width="150"
        label="活动库存">
        <template slot-scope="scope">
          <span hidden="true">{{typeof (scope.row.goodsInventory) === "undefined" ? scope.row.goodsInventory = scope.row.count : scope.row.goodsInventory}}</span>
          <el-input v-model="scope.row.goodsInventory" @change="checkInventory(scope.row.goodsInventory,scope.row.count)"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        prop="sendIntegral"
        header-align="center"
        align="center"
        v-if="!goodsType"
        label="活动赠券">
        <template slot-scope="scope">
          <span v-if="!goodsType" hidden="true">
            {{typeof (scope.row.sendIntegral) === "undefined" ?
                scope.row.sendIntegral = scope.row.integral : scope.row.sendIntegral}}
          </span>
          <span v-if="goodsType" hidden="true">{{typeof (scope.row.sendIntegral) === "undefined" ? scope.row.sendIntegral = 0 : scope.row.sendIntegral}}</span>
          <el-input v-model="scope.row.sendIntegral" placeholder="" @change="checkNumber(scope.row.sendIntegral,true)" ></el-input>
        </template>
      </el-table-column>
    </el-table>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="addSelectSpecs()" :disabled="checkFlag">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data: function () {
      return {
        checkFlag: false,
        flag: false,
        visible: false,
        goodsType: null,
        dataList: [],
        dataListLoading: false,
        id: null,
        dataListSelections: []
      }
    },
    methods: {
      checkInventory (goodsInventory, count) {
        if (parseInt(goodsInventory) > parseInt(count)) {
          this.checkFlag = true
          this.$message.error('活动库存不可以大于原有库存')
        }
        let reg = /^\d+$/
        if (!reg.test(goodsInventory)) {
          this.checkFlag = true
          this.$message.error('数据不合法')
        } else {
          this.checkFlag = false
        }
      },
      checkNumber (value, flag) {
        let reg = ''
        if (flag) {
          // 整数
          reg = /^\d+$/
        } else {
          // 小数
          reg = /^(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,}$)$/
        }
        if (!reg.test(value)) {
          this.$message.error('数据不合法')
          this.checkFlag = true
        } else {
          this.checkFlag = false
        }
      },
      init (id, info, flag, goodsType) {
        this.visible = true
        this.dataList = info
        this.id = id
        console.log(goodsType)
        this.goodsType = goodsType
        this.flag = flag
      },
      tableClink (row, column, cell, event) {
        if (column.label === '活动赠券' || column.label === '活动库存' || column.label === '活动利润' || column.label === '活动价' || column.label === '活动价（券）') {
          this.$refs.table.toggleRowSelection(row, true)
        }
      },
      // 表单提交
      addSelectSpecs () {
        if (this.flag) {
          // 修改时
          this.$http({
            url: this.$http.adornUrl(`/activity/spikeGoods/modify`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.id,
              'goodsInventoryDetail': JSON.stringify(this.dataList)
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.$parent.getGoodsDataList()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        } else {
          // 添加规格时
          let ids = this.dataListSelections.map(item => {
            return item.id
          })
          if (ids.length === 0) {
            this.visible = false
            return
          }
            // for (let i = 0; i < ids.length; i++) {
            //   for (let j = 0; j < this.dataList.length; j++) {
            //     if (this.dataList[j].id === ids[i]) {
            //       this.dataList.splice(j, 1)
            //     }
            //   }
            // }
          for (let j = 0; j < this.dataList.length; j++) {
            if (ids.indexOf(this.dataList[j].id) === -1) {
              this.dataList[j].activityGoodsCostingPrice = this.dataList[j].goodsCostingPrice
              console.log(this.dataList[j].activityGoodsCostingPrice)
              console.log(this.dataList[j].goodsCostingPrice)
              this.dataList[j].sendIntegral = this.dataList[j].integral
              this.dataList[j].goodsInventory = this.dataList[j].count
              this.dataList[j].goodsPrice = this.dataList[j].vipPrice
            }
          }
          this.$emit('info', this.id, this.dataList)
        }
        this.visible = false
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      }
    }
  }
</script>
